<template>
    <div class="list">
        <mu-container>
            <mu-card style="width:47%; margin:3% 1% 0 1%;float:left;" v-for="item in listData"   @click="enterListDetails(item.data,item.data.id)" >
                <mu-card-media :sub-title="item.data.title" class="titleCard">
                    <img :src="item.data.cover.detail" class="imgCard">
                </mu-card-media>
            </mu-card>
        </mu-container>
    </div>
</template>

<script>
    export default {
        name: "listArea",
        data:function(){
            return {
                listData:[],
                newArray:[],
            }
        },
        created(){

      },
    methods:{
             getListDatas() {
                     const that = this;
                     this.$axios({
                         method:'get',
                         url: "api",
                         data:this.qs.stringify({ })
                     }).then((response) =>{
                         console.log(response);
                         const lists = response.data.itemList;
                         for(let i=0;i<lists.length;i++){
                             if(lists[i].type=="video"){
                                 that.listData.push(lists[i])
                             }
                         }
                     }).catch((error) =>
                         console.log(error)
                 )

             },
            enterListDetails(data,id){
                var _self =this;
                _self.judgeVideoracord(data);
                //_self.$router.push({ name:'listDetails', params:{datas:data}});//如果用params 应用name
                // _self.$router.push({ path:'/listDetails', query:{datas:data}}); //如果用query  就用path
                _self.$router.push({
                    path:'/listDetails',
                    name:'listDetails',
                    params:{
                        prmData:data,
                        prmId:id,
                    }
                })

            },
           judgeVideoracord(data){
               let _self = this;
               //_self.$store.dispatch('upfid',7878);//dispatch('actions方法名','参数')
               let video_title = data.title;
               let video_id = data.id;
               let video_img = data.cover.detail
               let arrays = [];
               //localStorage.removeItem("videoRecord");
               let videoDatas = localStorage.getItem("videoRecord");//缓存
               let videoInfos = video_title + '#'+ video_id + '#'+ video_img;//当前
               //arrays.push(videoDatas);
               arrays.push(videoInfos);
               localStorage.setItem("videoRecord",JSON.stringify(arrays));//更新新缓存数据
               _self.$store.dispatch('addFun',arrays);//更新仓库数据
           }

        },
        mounted: function () {
            this.getListDatas();
        },
        computed:{
            videoRecord(){
                return this.$store.state.videoRecord //获取store.state中的数据
            }
        }
    }
</script>

<style scoped>
.list{
   width:100%;
    height:auto;
    float:left;
    margin-top:10px;
    margin-bottom:80px;
}
    .titleCard{
        width:100%;
        padding:0;
        margin:0;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp:1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
    }
    .imgCard{
        width:100%;
        height:120px;
    }
</style>